<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign One</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <style type="text/css">
        body{
            background-image: url("background.jpg");
            background-repeat: no-repeat;
        }
        ul{
            text-align: right;
        }
        ul li{
            list-style-type: none;
            display: inline-block;
            margin-right: 1.5%;

        }
        .main{
            width: 300px;
            height: 100px;
            border:3px solid #ededed;
            border-radius: 2px;
        }
        section{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .main input{
            background-color: transparent;
            width: 300px;
            height: 48px;
            border-style: none;
            text-indent: 4%;
            font-family: inherit;
        }
        hr{
            margin: 0 7% 0 auto;
            width: 85%;
        }
        .btn{
            width: 308px;
            height: 44px;
            background-color: #889be0;
            border-radius: 2px;
            margin-top: 6%;
            font-family: inherit;
        }
        .foot{
            margin-top: 3%;
            text-align:center;
        }
        .foot a{
            font-family: inherit;
            color: gray;
            font-size: small;
            margin-left: 8%;
        }
    </style>
</head>
<body>
<header>
    <ul>
        <li>SIGNIN</li>
        <li>SINGUP</li>
        <li>MENU<i class="fa fa-bars" aria-hidden="true"></i></li>
    </ul>
</header>
<section>
    <form>
        <div class="main">
            <input type="text" value="" placeholder="Login">
            <hr/>
            <input type="text" value="" placeholder="Password">
        </div>
        <input type="button" value="Sign In" class="btn">
    </form>
    <div class="foot">
    <a href="#">Sign Up</a>
    <a href="#">ForgotPassword?</a>
    </div>
</section>
</body>
</html>